/**
 * 完成第三级分类页面的添加分类功能
 *  */ 

// 拿到要添加分类信息的标题
const category_title = document.getElementById('category')

// 拿到所有可以添加分类信息的子项
const category_item = document.querySelectorAll('.item_category')


// 当子项分类信息过多时，添加更多按钮，点击可以显示所有内容，单击成功后，变成收起按钮，点击收起隐藏内容
addOpenOrClose()

// 点击子项分类，把子项分类信息添加到分类标题上后，删除该子项
$('.item_content').on('click','a',function(e) {

	// 被委托的对象
	const deleT = e.delegateTarget
	
	// 记录attr的属性
	const indexAttr = $(deleT).attr("index")
	
	// 把option放入分类树上,动态生成p
	$('#category > span').before('<p index="'+indexAttr+'">'+this.innerText+'</p>')
	
	// 发ajax请求
	sendAjaxTakeArg()
	
	// 给category移除事件
	$('#category').off('click','p')
	
	// 给每一个p添加事件
	$('#category').on('click','p',function(e) {
		// 拿到p的index属性
		const indexAttr = $(this).attr('index')
		
		// 删除p，去掉条件
		$(this).remove()
		
		// 从新发ajax请求
		sendAjaxTakeArg()
		
		// 先恢复显示
		$('.item_content[index='+indexAttr+']').parent().show()
	})
	
	// 隐藏该项
	$(deleT.parentNode).hide()

	
})


// 当子项分类信息过多时，添加打开或收起功能的按钮
function addOpenOrClose(){

    // 首先遍历所有的子项，并判断是否元素超出宽度
    for(let i  = 0; i < category_item.length;i++){
        // 拿到子节点div的宽度和子节点div的所有子节点的宽度和数量
        const divWidth = category_item[i].children[1].clientWidth

        // 拿到div子元素第一个a元素数量
        const divChildrenANums = category_item[i].children[1].children.length       

        // 要先判断div中是否有元素
        if(divChildrenANums > 0){
            // 拿到div子元素第一个a元素的宽度
            const divChildrenAWidth = category_item[i].children[1].children[0].clientWidth
            
            // 开始进行判断
            if(divWidth < divChildrenANums * divChildrenAWidth){
                // 如果确实超出了，就在最后一行添加打开或收起功能的按钮
                // 新建一个按钮
                const openOrCloseButton = document.createElement('a')
                // 添加属性
                openOrCloseButton.setAttribute('href','javascript:void(0)')
                openOrCloseButton.innerText = '更多∨'                
                
                // 用来判断是第一次还是第二次
                let category_flag = true
                // 记录原始的高
                const ordHeight = category_item[i].clientHeight

                //添加单击事件
                openOrCloseButton.addEventListener('click',()=>{
                                      
                    if(category_flag){  // 第一次点击的时候是展开更多内容,只要重新设置项目的高度即可
                        // 得到需要添加的高度
                        const newHeight =  ordHeight * (divChildrenAWidth * divChildrenANums) / divWidth 
                        // 先把按钮中的文字转成收起
                        openOrCloseButton.innerText = '收起∧'
                        // 设置高度
                        category_item[i].style.height =  newHeight + 'px'

                    }else{   // 第二次点击的时候是收起多余内容，只要重新设置旧高度即                 
                         // 先把按钮中的文字转成添加
                        openOrCloseButton.innerText = '更多∨'

                        category_item[i].style.height = ordHeight + 'px'

                    }
                    
                    category_flag = !category_flag
                })

                category_item[i].appendChild(openOrCloseButton)
            }
        }
        
    }
}


/**
 * 向页面发送带参数的ajax请求并完成渲染
 * @param sortStyle  排序方式
 * @param leftV 左值
 * @param rightV 右值
 * @param skip 当前页（默认0是第一页）
 * @returns
 */
function sendAjaxTakeArg(sortStyle='normal',leftV,rightV,skip) {
	// 得到请求参数
	let queryArgument = new Array()
	
	$.each($('#category > p'),(index,item)=>{
		const indexAttr = $(item).attr('index')
		const textContent = $(item).text()
		
		console.log(indexAttr)
		queryArgument.push({'key':indexAttr,'value':textContent})
	})
	
	// 发ajax请求
	$.getJSON(
		'getDataByPriceOrPressOrAuthor',
		{
			'categoryId': $('#category > a:first').attr('index'),
			'queryArgument': JSON.stringify(queryArgument),
			'sortStyle': sortStyle,
			'leftV': leftV,
			'rightV': rightV,
			'skip':skip
		},
		data=>{
			// json数据转成对象
			for(var i in data){
				// 开始渲染页面
				console.log(data)
				// 先设置查到的总数量
				$('#category > span > em').text(i)
			
				// 删除掉所有的图书
				$('#category_books').empty()
				
				// 遍历每一张图书，渲染设置
				setBookFromList(data,i)
			}
		}
	)
}

// 根据传入的List渲染网页
function setBookFromList(data,i) {
	$.each(data[i],(index,book)=>{
		const category_book ='<div class="category_book">'
		const book_image = '<img class="pic" src="'+book.image+'">'
		const book_title = '<div><a class="name" href="book/'+book.id+'">'+book.title+'</a>'
		const book_discount = '<p class="price"><span>￥:<em class="now_price">'+(book.price / 10.0 * book.discount).toFixed(2) +'</em></span>'
		const book_price = '<span>定价:<em>￥:'+book.price+'</em>（<em>'+book.discount+'</em>折）</span></p>'
		const book_author = '<p class="author"><span>'+book.author.replace(";"," , ")+'</span>'
		const book_createTime = '&nbsp;<span>'+(new Date(book.createTime).toLocaleDateString())+'</span>'
		const book_press = '&nbsp;<span>'+book.pressName+'</span></p>'
		const book_comment = '<p class="comments"><em>'+book.commentNum+'</em>条评论</p>'
		const book_sale = '<p class="extra_sale"><span>自营</span><span>卷</span></p>'
		const book_introduction = '<p class="introduction">'+book.introduction+'</p>'
		const book_button = '<p class="shopping"><button class="shoppingcar">加入购物车</button><button class="toshop">购买</button></p></div></div>'
	
		// 拼串放入
		$('#category_books').append(category_book+book_image+book_title+book_discount+book_price+book_author+book_createTime+book_press+book_comment+book_sale+book_introduction+book_button)
	})
}
